<template>
  <uni-nav-bar :title="title+'工资'" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="animation-slide-right">
    <view class="direction-start" style="background-color: #39A8FF;color:#fff;padding:30rpx;box-sizing: border-box;"
      v-if="infor">
      <view class="space-between" style="margin-top: 5rpx;width:100%;">
        <view style="font-size: 48rpx;">￥{{infor.count}}</view>
        <view @click="open()">编辑</view>
      </view>
      <view style="margin-top: 5rpx;font-size: 26rpx;"><text>基本工资：{{infor.wages}}</text><text
          style="margin-left:15rpx;">奖金：{{infor.jiang}}</text></view>
    </view>
  </view>
  <!--  <view class="package_sale space-between" @click="navTo('administrator/sale/attendance?month='+title+'&id='+staff_id)">
    <view>考勤记录</view>
    <uni-icons type="forward" size="20"></uni-icons>
  </view> -->
  <view class="package_sale" v-if="rewardList">
    <view class="center" @click="()=>show=!show">{{rewardList[0].name}} {{rewardList[0].value}} <uni-icons type="top"
        size="20" :style="{transform:show?'rotate(180deg)':'rotate(0deg)',marginLeft:'20rpx'}"></uni-icons></view>
    <view v-if="show" style="color:#666;margin:15rpx 0px;font-size:24rpx;">
      <view v-for="(item,index) in rewardList" :key="index"
        :style="{margin:'10rpx 0px',display:index===0?'none':'block'}">
        {{item.name}}：{{item.value}}
      </view>
    </view>
  </view>
  <view class="package_sale" style='padding:0px 20rpx;'>
    <view class="space-between list" v-for="(item,index) in detailList" :key="index"
      @click="navTo('administrator/sale/detail?name='+item.title+'&money='+item.money+'&title='+title+'&type='+item.type+'&month='+month+'&id='+staff_id)">
      <view>{{item.title}}</view>
      <view>{{item.money}}</view>
    </view>
  </view>
  <uni-popup ref="fillState" type="center">
    <view class="fillState">
      <view style="margin-bottom: 20rpx">每天基本工资</view>
      <input class="uni-input" placeholder="请输每天基本工资" v-model="money" />
      <view @click="submit()">确认</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack, navTo } from '@/utils/navigator';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getWagesInfo, getWagesData, getXishu } from '@/gql/administrator';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  /**
   * 地推考勤奖励详情列表
   * @param staff_id 地推ID
   * @param detailList 奖励类型列表
   * @param title 标题
   * @param month 月份
   * @param infor 当前月份的薪资信息
   * @param rewardList 薪资计算比例
   * @param show 是否全部显示
   * @param fillState 编辑基本薪资弹框
   * @param money 编辑每天基本薪资
   */
  const staff_id = ref();
  const detailList = ref([]);
  const title = ref()
  const month = ref()
  const infor = ref()

  const rewardList = ref()
  const show = ref(false)

  const fillState = ref(null);
  const money = ref();
  onLoad((pearm) => {
    title.value = pearm.title
    month.value = pearm.month
    staff_id.value = Number(pearm.id)
    init()
    salaryData()
    xishu()
  })
  /**
   * 获取当前月份的基本薪资信息
   */
  function salaryData() {
    showLoading()
    const payload = {
      query: getWagesData,
      variables: {
        staff_id: staff_id.value,
        month: month.value
      },
    };
    toPublish(
      'ql/staff/getWagesData',
      payload,
      (obj : any) => {
        const { getWagesData } = obj.data;
        infor.value = getWagesData
      }
    );
  }
  /**
   * 获取薪资构成列表
   * @param staff_id 地推ID
   * @param month 月份
   */
  function init() {
    showLoading()
    const payload = {
      query: getWagesInfo,
      variables: {
        staff_id: staff_id.value,
        month: month.value
      },
    };
    toPublish(
      'ql/staff/getWagesInfo',
      payload,
      (obj : any) => {
        const { getWagesInfo } = obj.data;
        detailList.value = getWagesInfo
      }
    );
  }
  /**
   * 薪资构成比例
   */
  function xishu() {
    showLoading()
    const payload = {
      query: getXishu,
      variables: {
        staff_id: staff_id.value,
      },
    };
    toPublish(
      'ql/staff/getXishu',
      payload,
      (obj : any) => {
        const { getXishu } = obj.data;
        rewardList.value = getXishu
      },
    );
  }

  /**
   * 编辑并提交地推每日基本薪资
   */
  function submit() {
    showLoading()
    if (!money.value) {
      errorToast('请输每天基本工资')
      return
    }
    const payload = {
      staff_id: staff_id.value,
      value: money.value
    };
    toPublish(
      'control/setWorkFee',
      payload,
      (obj : any) => {
        closeBankPad()
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
        } else {
          errorToast(msg)
        }
      }
    );
  }
  /**
   * 打开地推基本薪资弹框
   */
  function open() {
    fillState.value.open()
  }
  /**
   * 关闭地推基本薪资弹框
   */
  function closeBankPad() {
    fillState.value.close();
  }
</script>

<style scoped lang="less">
  .list:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .list {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  .fillState {
    width: 650rpx;
    background-color: white;
    border-radius: 5px;
    padding: 30rpx 30rpx 40rpx 30rpx;
    box-sizing: border-box;

    view:nth-last-of-type(1) {
      margin: 10rpx auto;
      width: 280rpx;
      height: 98rpx;
      background: #3F90FF;
      border-radius: 5px;
      text-align: center;
      line-height: 98rpx;
      color: #fff;
    }
  }

  input {
    width: 100%;
    height: 82rpx;
    background: #ecf0f6;
    border-radius: 5px;
    padding-left: 20rpx;
    box-sizing: border-box;
    margin: 0rpx 0px 40rpx;
  }
</style>